<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { smsHandleApi } from '@/api/controller';
  import xmUpload from '@/components/Upload/xm-upload.vue';
  import { ToastError, ToastSuccess, Toastloading } from '@/utils/public';
  const formLabelWidth = '120px'
  const dataForm = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
  })
  interface formTypes {
    smsid:number
    phone:string
    content:string
    note:string
    sendtime:string
    fileurl:string
  }
  const form = reactive({
    
  }) as formTypes
  const validatePhone = (rule: any, value: any, callback: any)=>{1
    if(value === ''  && !form.fileurl ) {
      callback(new Error('请输入需要发送短信到手机号'))
    } else if( value && value.indexOf('，') > -1) {
      callback(new Error('请使用英文逗号分隔手机号'))
    } else {
      callback()
    }
  }
  const formRules = {
    phone: [{ required: true, trigger: 'blur', validator:validatePhone}],
    content: [{ required: true, trigger: 'blur', message: '请填写发送文案' }],
    sendtime: [{ required: true, trigger: 'blur', message: '请选择发送时间' }],
  }
  const handleSubmit = ()=>{
    dataForm.value.validate(async(valid:any)=>{
      const loading = Toastloading()
      if(valid) {
        let submitSet = false
        if(form.smsid) {
          await smsHandleApi.smsupdate(form).then(res=>{
            ToastSuccess('修改群发短信成功')
            submitSet = true
          }).catch(()=>{
            loading.close()
          })
        }else {
          await smsHandleApi.smsAdd(form).then(res=>{
            ToastSuccess('新增群发短信成功')
            submitSet = true
          }).catch(()=>{
            loading.close()
          })
        }
        if(!submitSet) return
        loading.close()
        closeDialog()
        $emit('updateList')
      }
    })
  }
  const getsmsInfo = async(smsid:number = 0)=>{
    if(!smsid) return ToastError('缺少smsid')
    const loading = Toastloading()
    const res = await smsHandleApi.getsmsInfo({
      smsid
    })
    const { phone='', content='', note='', sendtime='', fileurl='' } = res.data
    Object.assign(form,{
      smsid,
      phone,
      content,
      note,
      sendtime,
      fileurl
    })
    loading.close()
  }
  const openDialog = async(query:any = {})=> {
    const { id=0 } = query
    if(id) await getsmsInfo(id)
    
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog"
    v-model="action.dialogFormVisible"
    :close-on-click-modal="false"
    :show-close="false"
    :close-on-press-escape="false"
    title="发送短信">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item :label-width="formLabelWidth" label="手机号" prop="phone">
          <el-input type="textarea" v-model="form.phone"/>
          <div class="tipsInput">可用于追加手机号以英文逗号分割例：888,999</div>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="上传手机号">
          <xmUpload uploadUrl="/api/file/uploadNew" listType="text" v-model:file-url="form.fileurl"/> 
          <div v-if="form.smsid" class="tipsInput">修改时上传将会覆盖新增时的手机号上传文件</div>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="文案" prop="content">
          <el-input v-model="form.content"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="预计发送时间" prop="sendtime">
          <el-date-picker
            v-model="form.sendtime"
            type="datetime"
            placeholder="请选择预计发送时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="备注" prop="note">
          <el-input v-model="form.note"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped >
  .xm-dialog{
    .el-input {
        width: calc($inputWidth);
    }
}
</style>